home *** CD-ROM | disk | FTP | other *** search
/ MacFormat UK 176 / MF_UK_176_1.iso / DiscContents / In the mag / Widgets / BBC Radio Widget 2.2 / BBC Radio widget / BBC Radio.wdgt / progress indicator.js < prev    next >
Encoding:
JavaScript  |  2006-07-21  |  7.0 KB  |  143 lines
  1. /*
  2.  
  3. BBC Radio widget by Hawkman. http://www.phantomgorilla.com/
  4. All suggestions and bug reports to hawkman@phantomgorilla.com please
  5.  
  6. *******************************************************************************
  7.  
  8. LICENCE
  9.  
  10. Free to use, free to look at and learn from, free to pinch small chunks of code from for use in your own projects.
  11.  
  12. However, you may NOT redistribute this widget, or a port or modified version of it, without obtaining permission from the author (via email, hawkman@phantomgorilla.com) and including credit to him in the finished project (a small notice in the widget's javascript/html files is all that's necessary; nothing visible on the widget).
  13.  
  14. This software is provided as-is, with no guarantee. The author can accept no responsibility for any consequences of its use.
  15.  
  16. *******************************************************************************
  17.  
  18. ABOUT THE WIDGET
  19.  
  20. - Basic Overview
  21.  
  22. This widget uses Real Player for the audio. Preferences are written upon the selection of an item in a pop-up menu, then this is compared to a list of stations to find the stream url. A function then writes html to the front of the widget to embed the realplayer plugin with the correct url, and changes the image source to reflect which station is playing.
  23.  
  24. - Credits
  25.  
  26. Basic Javascript routines taken out of Apple's sample Goodbye World widget. A small section of crash-preventing code is taken from Duncan Ponting's radio widget (http://www.bbc.co.uk/radio/prototypes/listenlive/) at his suggestion - cheers. Also taken from that widget is the idea to crawl the broswer plugins to find RealPlayer. Version string .plist lookup taken from Joshua Emmons' blank foo.wdgt (http://www.skia.net/). Study of his example AppleAnimator use was also extremely helpful. Some button-like routines adapted from Apple's GenericButton class.
  27.  
  28. Additional skills were obtained by studying Apple's sample files and the Mac OS X bundled widgets, however no actual code was used from these sources other than that mentioned already.
  29.  
  30. ******************************************************************************/
  31.  
  32.  
  33. /* 
  34. Progress indicator by Hawkman. http://www.phantomgorilla.com/
  35. based on  Apple's NSProgressIndicator in OS X. http://www.apple.com/
  36. tested in Safari 2.0.3, FireFox (Mac) 1.0.7
  37.  
  38. FREELY AVAILABLE FROM:
  39. http://www.phantomgorilla.com/20060411/nsprogressindicator-for-widgets/
  40. */
  41.  
  42.  
  43. // Global variables, to be accessed from multiple functions
  44. var progressIndicatorImages;
  45. var index = 0;
  46. var progressIndicatorTimer;
  47.  
  48.  
  49. // Loads the images to be used in the progress indicator, and stores them in an
  50. // array for easy access. We could contruct a method to call them later
  51. // during animateProgressIndicator() instead, but this way we also load them
  52. // before we actually need them, which prevents image flickering.
  53. // 2 birds + 1 stone = :)
  54. function loadProgressIndicatorImages(size)
  55. {
  56.     // set up the array to hold the images (12 of them, 0-11)
  57.     progressIndicatorImages = new Array(12);
  58.     // start a "for" loop, incrementing values of i between 0 and 11, to save
  59.     // us some writing!
  60.     for (var i=0;i < 12; i++)
  61.     {
  62.         // make a new image in progressIndicatorImages, the position of which
  63.         // is determined by i (which increments by 1 each time, remember)
  64.         progressIndicatorImages[i] = new Image();
  65.         // set the source based on the value of i, generating references of the
  66.         // type "images/indicator_small_3.png", for instance.
  67.         // If you change the image names or locations you'll have to alter this
  68.         // section accordingly.
  69.         progressIndicatorImages[i].src = "images/indicator_"+size+"_"+(i)+".png";
  70.     }
  71. }
  72.  
  73.  
  74. // Call this function to start the progress indicator spinning. It calls the
  75. // function to load the images, and calls another function at intervals (to
  76. // change the image). Requires passing of a size attribute, either "large" or
  77. // "small", eg. calling startProgressIndicator("small")
  78. function startProgressIndicator(size)
  79. {
  80.     // fades the radio station logo
  81.     document.getElementById("fader").style.display="block";
  82.     // calls the loadProgressIndicatorImages() function above
  83.     // must also pass a size of indicator to use, "large" or "small"
  84.     loadProgressIndicatorImages(size);
  85.     // calls animateProgressIndicator() at intervals of 42 milliseconds
  86.     // - that works out at 2 cycles/second, which is what Apple use in
  87.     // NSProgressIndicator
  88.     progressIndicatorTimer = setInterval('animateProgressIndicator()', 42);
  89. }
  90.  
  91.  
  92. // Call this function to stop the indicator. It clears the timer, hides it again
  93. // and resets it to the start position
  94. function stopProgressIndicator()
  95. {
  96.     // removes the fade from the radio station logo
  97.     document.getElementById("fader").style.display="none";
  98.     // clears the timer
  99.     clearInterval(progressIndicatorTimer);
  100.     // sets the timer to null, to provide an easy way of checking whether the
  101.     // timer is running or not, ie.:
  102.     // if (progressIndicatorTimer==null) :: timer is not running
  103.     // if (progressIndicatorTimer!=null) :: timer is running
  104.     // Useful if you want the same action to start/stop the indicator, just call
  105.     // an intermediate function which checks the value of the timer
  106.     progressIndicatorTimer=null;
  107.     // hides the indicator
  108.     document.getElementById("progress_indicator").style.display = "none";
  109.     // resets the index global variable (it's not 0, despite our definition
  110.     // above, because animateProgressIndicator() has been messing with it), so
  111.     // the animation will start from the top next time as expected
  112.     index=0;
  113.     // if we moused over the radio station image while the indicator was running, we should be showing the "What's On?" link - but we suppressed it while the indicator was running to avoid confusion (see whatsOnOver()). Now, if appropriate, we must run whatsOnOver to fade the link in.
  114.     if (shouldShowWhatsOn==true)
  115.     {
  116.        // calls the fade in
  117.        whatsOnOver("");
  118.     }
  119. }
  120.  
  121.  
  122. // This function does the actual animation, swapping the images in the indicator
  123. // when it's called at intervals by startProgressIndicator(). No need to call
  124. // this directly, it won't work in the same way.
  125. function animateProgressIndicator()
  126. {
  127.     // change the source of the indicator image to another of those held in the
  128.     // progressIndicatorImages array (determined by the current value of index)
  129.     document.getElementById("progress_indicator").src = progressIndicatorImages[index].src;
  130.     // set the indicator to block display (the CSS has it hidden to start with).
  131.     // We call it here after the first image has been shown, because it saves us
  132.     // a line explicitly resetting the indicator to the start position in
  133.     // stopProgressIndicator(), as well as making it immaterial whether we call
  134.     // the same size indicator each time
  135.     document.getElementById("progress_indicator").style.display = "block";
  136.     // if index is 11 - the last image - change it to 0, to start another cycle
  137.     if (index==11)
  138.     { index=0 }
  139.     // otherwise, increment it by 1, so that the next image in sequence is shown
  140.     // next time animateProgressIndicator() is called (in 42 milliseonds' time!)
  141.     else
  142.     { index=index+1 }
  143. }